<template>
  <div class="product-detail">
    <!-- 标题与元信息整合模块 -->
    <div class="product-header module-border">
      <!-- 左侧图片 -->
      <div class="product-image-container">
        <!-- <div class="product-image-placeholder"></div> -->
          <el-image
            v-if="product.image && product.image.trim() !== ''"
            :src="product.image"
            style="width: 78px; height: 78px; cursor: pointer;"
            fit="contain"
            alt="产品图片"
          >
          </el-image>
      </div>
      
      <!-- 右侧内容 -->
      <div class="product-header-content">
        <!-- 主标题 -->
        <div class="header-first-row"> 
          <h1 class="main-title">{{ product.name }}</h1>
          
          <div class="tags-container">
            <span v-for="(tag, tagIndex) in product.baseIndustryList" :key="tagIndex" class="tilted-tag">
              <span class="tag-text">{{ tag.name }}</span>
            </span>
          </div> 
        </div> 
        <!-- 元信息 -->
        <div class="meta-info">
          <span class="meta-item"><i style="margin-right: 3px;" class="el-icon-view"></i>浏览量 {{ product.pvCount }}</span>
          <span class="upload-date">上传日期 {{ product.createTime }}</span>
        </div>
      </div>
    </div>

    <!-- 产品描述模块 -->
    <div class="description-section module-border">
      <h2 class="section-title">产品描述</h2>
      <p style="color: #ddd;">{{ product.name }}</p>
<div style="text-align: center;">
      <img :src="product.image" alt="产品图片" style="width: 500px; height: 400px; margin: 20px 0;">

</div>
      <p class="description-content">
        {{ product.description }}
      </p>

      <ul class="highlights-list">
        <li v-for="(highlight, index) in product.highlights" :key="index" class="highlight-item">
          {{ highlight }}
        </li>
      </ul>
      <h2 class="section-title">产品参数</h2>
      <div class="params-list">
        <!-- 修改为键值对分行显示 -->
        <div v-if="Object.keys(parsedProductStandard).length > 0">
          <p v-for="(value, key, index) in parsedProductStandard" :key="index" class="param-item" style="color: #ddd;">
            <strong style="color: #ddd;">{{ formatParamName(key) }}：</strong>{{ formatParamValue(value) }}
          </p>
        </div>
        <p v-else class="param-empty">暂无产品参数信息</p>
      </div>
    </div>

    <!-- 产品参数模块 -->
    <div class="module-border" style="display: flex;align-items: center;justify-content: center;">
      <el-button @click="duibidialog" class="action-button"><span>对比</span></el-button>
    </div>

    <!-- 上传产品表格弹窗 -->
    <el-dialog title="上传产品对比数据" :visible.sync="duibiDialogVisi" width="620px" center :show-close="false">
      <div class="upload-container">
        <div class="mock-upload-content">
          <el-upload class="upload-box-style" ref="uploaddbTemp" :http-request="dBupload" action=""
            :on-preview="handlePreviewdbTemp" :on-remove="handleRemovedbTemp" :file-list="fileListdbTemp"
            :multiple="false" :auto-upload="false" accept="" :limit="1" :on-exceed="OnExceeddbTemp">
            <div class="upload-box">
              <div class="plus-icon">+</div>
              <div class="upload-text">点击上传</div>
            </div>
          </el-upload>
        </div>
      </div>



      <span slot="footer" class="dialog-footer"
        style="display: flex;align-items: center;justify-content: space-around;">
        <button type="primary" class="dialogqxbtn" @click="duibiDialogVisi = false"><span>取消</span></button>
        <button type="primary" class="dialogqxTwo" @click="submitduibiUpload"><span>提交</span></button>
      </span>

    </el-dialog>

    <!-- 对比结果分析弹窗 -->
    <el-dialog title="产品对比" :visible.sync="ComResultsd" width="900px" center :show-close="true">
      <div class="upload-container">
        <div class="mock-upload-content">
          <!-- 合并为一个表格布局 -->
          <div class="comparison-container">
            <div class="comparison-column">
              <!-- 产品对比标题 - 表格形式 -->
              <div class="comparison-table-wrapper">
                <table class="comparison-table">
                  <tr class="header-row" style="height: 100px;">
                    <!-- A1单元格：产品 -->
                    <td class="param-key" style="width: 164px; vertical-align: middle;">产品</td>
                    <!-- B1-B2合并单元格：对比信息 -->
                    <td colspan="3" style="display: flex; align-items: center; justify-content: center; gap: 15px;">
                      <span class="product-standard-btn">当前产品</span>
                      <img src="../../assets/img/pro/imgvs.png" alt="" style="width: 100px; height: 100px;">
                      <span class="product-standard-btn">上传的Excel数据</span>
                    </td>
                  </tr>
                </table>
              </div>
              <div v-if="hasData(comparisonData.standard) && hasData(comparisonData.updateParam)"
                class="comparison-table-wrapper">
                <table class="comparison-table">
                  <!-- 获取所有唯一的参数键 -->
                  <tr v-for="(value, key, index) in getCombinedParams()" :key="`comparison-${index}-${key}`" :class="['comparison-row', {
                    'match-row': isParamMatch(key, comparisonData.updateParam[key]),
                    'error-row': hasError(key) || !isParamMatch(key, comparisonData.updateParam[key])
                  }]">
                    <td class="param-key">{{ formatKey(key) }}</td>
                    <!-- 左侧：当前产品标准值 -->
                    <td class="standard-value">{{ formatValue(comparisonData.standard[key] || '-') }}</td>
                    <!-- 中间分隔线 -->
                    <td class="table-divider"></td>
                    <!-- 右侧：上传的Excel数据值 -->
                    <td class="upload-value">{{ formatValue(comparisonData.updateParam[key] || '-') }}</td>
                    <!-- <td v-if="hasError(key) || !isParamMatch(key, comparisonData.updateParam[key])" class="error-message">
                      <i class="el-icon-warning"></i> {{ comparisonData.error[key] || '参数不匹配' }}
                    </td> -->
                  </tr>
                </table>
              </div>
              <div v-else class="no-data">暂无数据</div>
            </div>
          </div>

          <!-- 对比结果总结 - 表格形式 -->
          <div class="comparison-summary" v-if="getErrorParams().length > 0">
            <div class="comparison-table-wrapper">
              <table class="comparison-table">
                <tr class="error-row">
                  <!-- 第一列：对比结果标签 -->
                  <td class="param-key" style="width: 164px;">对比结果</td>
                  <!-- 合并单元格显示不匹配的参数 -->
                  <td colspan="3">
                    <span v-for="(param, index) in getErrorParams()" :key="`error-${index}`" class="error-param-item">
                      {{ formatKey(param) }}
                      <span v-if="index < getErrorParams().length - 1">、</span>
                    </span>
                  </td>
                </tr>
              </table>
            </div>
          </div>

          <!-- 无错误提示 -->
          <div class="comparison-summary success-summary"
            v-else-if="hasData(comparisonData.standard) && hasData(comparisonData.updateParam)">
            <h3 class="summary-title">对比结果</h3>
            <div class="success-message">所有参数匹配一致</div>
          </div>
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="ComResultsd = false">关闭</el-button>
      </span> -->
    </el-dialog>

  </div>
</template>

<script>
import { getProductCompareDetail, GcUploadProductCompare } from '../../api/user';
export default {
  data() {
    return {
      product: {},
      duibiDialogVisi: false,
      ComResultsd: false,
      fileListdbTemp: [],
      dbuploadId: '',
      comparisonData: {
        standard: {},
        updateParam: {},
        error: {}
      }
    };
  },
  computed: {
    // 获取所有唯一的参数键
    getCombinedParams() {
      return () => {
        const combined = { ...this.comparisonData.standard, ...this.comparisonData.updateParam };
        return combined;
      };
    },
    // 解析产品参数 - 修正为正确的引用路径
    parsedProductStandard() {
      const standard = this.product.productStandard; // 修正为 product.productStandard

      try {
        // 如果已经是对象，直接返回
        if (typeof standard === 'object' && standard !== null) {
          return standard;
        }
        
        // 如果是字符串，尝试解析为JSON
        if (typeof standard === 'string') {
          let jsonStr = standard.trim();
          // 尝试清理和解析JSON字符串，处理可能的转义字符问题
          try {
            // 尝试直接解析
            return JSON.parse(jsonStr);
          } catch (e) {
            // 如果失败，尝试处理可能的转义问题
            // 移除可能的前后空格或其他字符
            if (jsonStr.startsWith('{') && jsonStr.endsWith('}')) {
              // 尝试第二次解析
              return JSON.parse(jsonStr);
            }
            throw e; // 重新抛出异常
          }
        }
      } catch (error) {
        // 解析失败时，返回原始字符串以便用户查看
        console.error('产品参数格式错误:', error);
        return { '原始参数': standard || '' };
      }

      // 其他情况返回空对象
      return {};
    }
  },
  mounted() {
    this.dbuploadId = this.$route.query.id;
    const id = this.$route.query.id;
    if (id) {
      this.loadDetailcp(id)
    }
  },
  methods: {
    // 格式化参数名称
    formatParamName(key) {
      if (!key) return '';

      // 简单的格式化，将下划线或驼峰命名转换为更友好的显示
      let formattedKey = String(key);
      // 处理驼峰命名
      formattedKey = formattedKey.replace(/([A-Z])/g, ' $1');
      // 处理下划线
      formattedKey = formattedKey.replace(/_/g, ' ');
      // 首字母大写
      formattedKey = formattedKey.charAt(0).toUpperCase() + formattedKey.slice(1);

      return formattedKey;
    },

    // 格式化参数值
    formatParamValue(value) {
      if (value === null || value === undefined) return '';

      // 如果是对象或数组，转换为字符串
      if (typeof value === 'object') {
        try {
          return JSON.stringify(value);
        } catch (e) {
          return String(value);
        }
      }

      return String(value);
    },

    // 其他方法保持不变
    dBupload(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      formData.append("id", this.dbuploadId);
      GcUploadProductCompare(formData).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.comparisonData = {
            standard: res.data?.standard || {},
            updateParam: res.data?.updateParam || {},
            error: res.data?.error || {}
          };
          this.duibiDialogVisi = false;
          this.ComResultsd = true;
          // 添加这一行，清空文件列表
          this.fileListdbTemp = [];
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.$message.error(err.msg || '上传失败');
        // 错误时也清空文件列表，避免影响下次上传
        this.fileListdbTemp = [];
      })
    },
    hasData(obj) {
      return obj && typeof obj === 'object' && Object.keys(obj).length > 0;
    },
    hasError(key) {
      return this.comparisonData.error &&
        typeof this.comparisonData.error === 'object' &&
        this.comparisonData.error[key] !== undefined;
    },
    isParamMatch(key, value) {
      if (!this.hasData(this.comparisonData.standard)) return false;

      const standardValue = this.comparisonData.standard[key];
      if (standardValue === undefined) return false;

      if (typeof standardValue === 'object' && typeof value === 'object') {
        try {
          return JSON.stringify(standardValue) === JSON.stringify(value);
        } catch (e) {
          return String(standardValue) === String(value);
        }
      }

      return String(standardValue) === String(value);
    },
    getErrorParams() {
      const errorParams = [];

      if (this.comparisonData.error && typeof this.comparisonData.error === 'object') {
        Object.keys(this.comparisonData.error).forEach(key => {
          errorParams.push(key);
        });
      }

      if (this.hasData(this.comparisonData.updateParam)) {
        Object.entries(this.comparisonData.updateParam).forEach(([key, value]) => {
          if (!errorParams.includes(key) && !this.isParamMatch(key, value)) {
            errorParams.push(key);
          }
        });
      }

      return errorParams;
    },
    formatKey(key) {
      if (key === null || key === undefined) return '';
      return String(key);
    },
    formatValue(value) {
      if (value === null) return 'null';
      if (value === undefined) return 'undefined';

      if (typeof value === 'object') {
        try {
          return JSON.stringify(value, null, 2);
        } catch (e) {
          return String(value);
        }
      }
      return String(value);
    },
    handlePreviewdbTemp(file) {
      console.log(file, "1");
    },
    handleRemovedbTemp(file, fileList) {
      console.log(file, fileList,);
    },
    submitduibiUpload() {
      this.duibiDialogVisi = false;
      this.$refs.uploaddbTemp.submit();
    },
    OnExceeddbTemp() {
      this.$message.error("文件上传超出限制");
    },
    duibidialog() {
      // 添加这一行，打开对话框时清空文件列表
      this.fileListdbTemp = [];
      this.duibiDialogVisi = true;
    },
    loadDetailcp(id) {
      getProductCompareDetail(id).then(res => {
        this.product = res.data
      }).catch(err => {
        console.error('获取详情失败:', err)
      })
    },
  }
};
</script>

<style scoped>


.dialogqxbtn {
  width: 158px;
height: 40px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  transform: skew(-15deg);
  background: #182F50;
  border-radius: 0px 0px 0px 0px;
  margin-left: 30px;
  border: 1px solid;
  border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
}
.dialogqxbtn span{
  transform: skew(15deg);
}
.dialogqxTwo{
width: 158px;
height: 40px;
  color: #fff;
  text-align: center;
  transform: skew(-15deg);
  margin-right: 30px;

  font-size: 14px;
  line-height: 1;
background: linear-gradient( 180deg, rgba(0,135,255,0.25) 0%, rgba(0,135,255,0.52) 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
}
.dialogqxTwo span{
  transform: skew(15deg);
}
/* 基础样式重置 */
.product-detail {
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #04142B;
  max-width: 1600px;
  margin: 0 auto;
}

/* 通用模块边框样式 */
.module-border {
  padding: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
  color: fff;
}

/* 产品头部模块 */
/* 产品头部模块 */
.product-header {
  padding: 25px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
    text-align: left;
  border-bottom: 1px solid rgba(102, 102, 102, 0.5);

}

/* 左侧图片容器 */
.product-image-container {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

/* 图片占位符 - 灰色背景 */
.product-image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #6c757d;
  border-radius: 4px;
}

/* 右侧内容区域 */
.product-header-content {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}

/* 主标题样式 */
.main-title {
  font-size: 28px;
  margin: 0 0 15px 0;
  color: #fff;
  font-weight: 500;
  text-align: left;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
}

/* 元信息样式 */
.meta-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #777;
  gap: 10px 20px;
  margin: 10px 0;
}

.meta-item {
  white-space: nowrap;
  color: #ddd;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
}

.upload-date {
  margin-left: auto;
  display: inline-block;
  color: #ddd;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
}

/* 模块标题通用样式 */
.section-title {
  font-size: 20px;
  color: #fff;
  font-weight: 900;
  font-size: 20px;
}

/* 描述内容样式 */
.description-content {
  line-height: 1.8;
  color: #ddd;
  margin-bottom: 15px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
}

.highlights-title {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 10px;
  color: #333;
  font-weight: 500;
}

.highlights-list {
  padding-left: 20px;
  margin-bottom: 0;
}

.highlight-item {
  margin-bottom: 8px;
  line-height: 1.6;
  color: #444;
}

/* 产品参数键值对样式 */
.params-list {
  padding: 10px 0;
  color: #fff;
}

.param-item {
  line-height: 1;
  color: #ddd;
  font-size: 14px;
  padding: 8px 0;
}

.param-item:last-child {
  border-bottom: none;
}

.param-item strong {
  color: #606266;
  font-weight: 500;
  margin-right: 5px;
}

.param-empty {
  text-align: center;
  padding: 40px 0;
  color: #909399;
  font-size: 14px;
}

/* 对比布局样式 */
.comparison-container {
  width: 100%;
  margin-bottom: 20px;
}

.comparison-column {
  width: 100%;
  background: #182F50;
  border-radius: 6px;
  padding: 15px;
  max-height: 500px;
  overflow-y: auto;
}

.column-title {
  font-size: 18px;
  font-weight: 600;
  border-bottom: none;
  text-align: center;
  color: #fff;
  padding: 15px;
  background-color: #182F50;
  border-radius: 4px;
  border: 1px solid #1A9ADB;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.column-title img {
  width: 100px;
  height: 100px;
  vertical-align: middle;
  object-fit: contain;
}

/* 产品标准按钮样式 */
.product-standard-btn {
  width: 200px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 500;
  background-size: 100% 100%; /* 使用100% 100%确保图片完整显示而不被裁剪 */
  background-position: center;
  background-repeat: no-repeat;
}

/* 当前产品按钮 - 使用duibile.png背景 */
.product-standard-btn:nth-child(1) {
  background-image: url('../../assets/img/pro/duibile.png');
}

/* 上传的Excel数据按钮 - 使用duibiri.png背景 */
.product-standard-btn:nth-child(3) {
  background-image: url('../../assets/img/pro/duibiri.png');
}



/* 表格布局样式 */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid #1A9ADB;
}

.comparison-row {
  transition: background-color 0.3s, transform 0.2s;
  border-bottom: 1px solid #fff;
  background-color: #182F50;
}

.comparison-row:last-child {
  border-bottom: none;
}



.standard-value {
  width: 40%;
  padding: 12px 8px;
  color: #fff;
  background-color: #182F50;
  word-break: break-word;
  font-size: 14px;
  text-align: center;

}

.table-divider {
  width: 1px;
  background-color: #fff;
  height: auto;
  padding: 0;
  margin: 0;
}

.upload-value {
  width: 40%;
  padding: 12px 8px;
  color: #fff;
  background-color: #182F50;
  word-break: break-word;
  font-size: 14px;
  text-align: center;
}

/* 匹配行样式 - 绿色 */
.comparison-row.match-row {
  background-color: rgba(240, 249, 232, 0.9);
  border-left: 4px solid #67c23a;
  transition: all 0.3s ease;
}

.comparison-row.match-row:hover {
  background-color: rgba(240, 249, 232, 1);
  transform: translateX(2px);
}

/* 不匹配行样式 - 红色 */
.comparison-row.error-row {
  background-color: #182F50;
  transition: all 0.3s ease;
  border-bottom: #fff 1px solid;
}

.comparison-row.error-row .upload-value {
  color: #FE3232;
  font-weight: 500;
  border-right: 1px solid #1A9ADB;
}



.comparison-table-wrapper {
  max-height: 400px;
  overflow-y: auto;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.comparison-row {
  transition: background-color 0.3s, transform 0.2s;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.comparison-row:last-child {
  border-bottom: none;
}

.param-key {
  width: 20%;
  padding: 0px 8px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  line-height: 60px;
  vertical-align: top;
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  border-right: 1px solid #1A9ADB;
  background-color: #1A3B6B;
}

.param-value {
  width: 65%;
  padding: 12px 8px;
  color: #303133;
  word-break: break-word;
  font-size: 14px;
}



@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.no-data {
  text-align: center;
  padding: 40px 0;
  color: #fff;
  font-size: 14px;
  background-color: #182F50;
  border-radius: 4px;
  border: 1px solid #fff;
}

/* 对比结果总结样式 */
.comparison-summary {
  background-color: #182F50;
  border-radius: 6px;
  padding: 15px;
  margin-top: 20px;
}

.summary-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #fff;
}

.error-params-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.error-param-item {
  color: #FE3232;
  padding: 6px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s;
}



/* 成功总结样式 */
.success-summary .summary-title {
  border-bottom-color: #67c23a;
}

.success-message {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  padding: 10px 0;
}

/* 滚动条样式美化 */
.comparison-table-wrapper::-webkit-scrollbar,
.comparison-column::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.comparison-table-wrapper::-webkit-scrollbar-track,
.comparison-column::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.comparison-table-wrapper::-webkit-scrollbar-thumb,
.comparison-column::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.comparison-table-wrapper::-webkit-scrollbar-thumb:hover,
.comparison-column::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* 响应式调整 */
@media (max-width: 600px) {
  .product-detail {
    padding: 10px;
  }

  .module-border {
    padding: 15px;
  }

  .product-header {
    padding: 20px 15px;
  }

  .main-title {
    font-size: 24px;
  }

  .meta-info {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .upload-date {
    margin-left: 0;
  }

  /* 对比布局响应式调整 */
  .comparison-container {
    flex-direction: column;
  }

  .comparison-column {
    max-height: 400px;
  }

  .param-key,
  .param-value,
  .standard-value,
  .upload-value {
    display: block;
    width: 100%;
  }

  .table-divider {
    display: none;
  }

  /* 总结区域响应式调整 */
  .error-params-list {
    flex-direction: column;
    gap: 8px;
  }

  .error-param-item {
    width: 100%;
    text-align: center;
  }

  /* 参数列表响应式调整 */
  .param-item {
    font-size: 13px;
    padding: 6px 0;
  }
}

/* 在<style scoped>部分修改产品描述模块的样式 */
.description-section {
  /* 添加固定高度 */
  max-height: 500px;
  /* 启用垂直滚动 */
  overflow-y: auto;
  /* 优化滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}

/* Webkit浏览器（Chrome, Safari等）的滚动条样式 */
.description-section::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.description-section::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.description-section::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.description-section::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

:deep(.el-button--primary, .el-button--small) {

  background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid;
  border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
  transform: skew(-10deg);
}

/* .el-dialog 弹窗样式优化 */
:deep(.el-dialog) {
  border: none;
}

:deep(.el-upload-dragger) {
  border: none;
  background-color: transparent;
  border: 1px dashed #d9d9d9;
}

:deep(.el-dialog__header) {
  border-bottom: none;
}

.upload-box-style {
  width: 100%;
}
.header-first-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tilted-tag{
  display: inline-block;
  border-radius: 0px 0px 0px 0px;
border: 1px solid #DDDDDD;
margin: 0 5px;
font-size: 12px;
padding: 5px;
transform: skew(-15deg);
color: #fff;
}
.tag-text{
  transform: skew(15deg);
}
.upload-box {
  width: 80px;
  height: 80px;
  border: 2px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 auto;
  margin-left: 250px;
}
/* :deep(.el-dialog__headerbtn){
  display: none;
} */
.upload-box:hover {
  border-color: #409eff;
  color: #409eff;
}

.plus-icon {
  font-size: 24px;
  color: #c0c4cc;
  margin-bottom: 5px;
}

.upload-text {
  font-size: 12px;
  color: #909399;
  text-align: center;
}

/* 确保文件列表显示在方框下方 */
.el-upload-list {
  display: block !important;
  margin-top: 10px !important;
  margin-left: 180px !important;
  width: 300px !important;
  position: relative !important;
}

/* 确保文件列表项正确显示 */
.el-upload-list__item {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 确保清除按钮可见 */
.el-upload-list__item:hover .el-upload-list__item-actions {
  visibility: visible !important;
}


.action-button {
  width: 300px;
  height: 46px;
  background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid;
  border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
  transform: skew(-15deg);
  color: #fff;
  font-size: 14px;
}

.action-button span {
  transform: skew(15deg);
}

:deep(.el-dialog__title) {
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  font-weight: 500;
  font-size: 24px;
  color: #FFFFFF;
}
</style>
